<template>
  <div class="p-6 bg-base-200/50 rounded-2xl">
    <CommentItem
      :comment="comment"
      :replies="replies"
      :show-replies="true"
      @toggle-like="handleToggleLike"
      @create-reply="handleCreateReply"
      @report-comment="handleReportComment"
      @delete-comment="handleDeleteComment"
      @reply-click="handleReplyClick"
    >
      <!-- 自定义作者信息插槽 -->
      <template #author="{ author, onClick }">
        <div class="flex items-center gap-2">
          <h4
            class="font-bold text-lg text-primary cursor-pointer hover:text-primary/80 transition-colors"
            @click="onClick"
          >
            {{ author.name }}
          </h4>
          <!-- VIP标识 -->
          <div
            class="px-2 py-1 bg-gradient-to-r from-yellow-400 to-orange-500 text-white text-xs rounded-full font-bold shadow-sm"
          >
            VIP
          </div>
          <!-- 等级标识 -->
          <div class="px-2 py-1 bg-blue-500 text-white text-xs rounded-full font-bold">
            Lv.{{ Math.floor(Math.random() * 10) + 1 }}
          </div>
        </div>
      </template>
    </CommentItem>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CommentItem } from '@/components/common/comment'
import type { Comment } from '@/apis/methods/comment.api'

// 评论数据
const comment = ref<Comment>({
  id: '1',
  content: '这个示例展示了自定义作者信息插槽的用法。作者名有特殊样式，还有VIP标识和等级标识。',
  author: {
    id: '1',
    name: 'VIP用户',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=vip',
  },
  createdAt: '2024-01-15T10:30:00Z',
  updatedAt: '2024-01-15T10:30:00Z',
  likes: 25,
  isLiked: false,
  replyCount: 3,
  parentId: undefined,
  articleId: '1',
  mentionedUsers: [],
  status: 'approved',
})

// 回复数据
const replies = ref<Comment[]>([
  {
    id: 'r1',
    content: 'VIP用户就是不一样！',
    author: {
      id: '2',
      name: '普通用户',
      avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=normal',
    },
    createdAt: '2024-01-15T11:00:00Z',
    updatedAt: '2024-01-15T11:00:00Z',
    likes: 5,
    isLiked: false,
    replyCount: 0,
    parentId: '1',
    articleId: '1',
    mentionedUsers: [],
    status: 'approved',
  },
])

// 事件处理函数
const handleToggleLike = (commentId: string) => {
  const targetComment =
    comment.value.id === commentId ? comment.value : replies.value.find((c) => c.id === commentId)
  if (targetComment) {
    targetComment.isLiked = !targetComment.isLiked
    targetComment.likes += targetComment.isLiked ? 1 : -1
  }
}

const handleCreateReply = (parentId: string, content: string) => {
  console.log('创建回复:', { parentId, content })
}

const handleReportComment = (commentId: string) => {
  console.log('举报评论:', commentId)
}

const handleDeleteComment = (commentId: string) => {
  console.log('删除评论:', commentId)
}

// 这些函数在插槽示例中不需要实际使用，但保留用于演示
// const handleAvatarClick = (author: Comment['author']) => {
//   console.log('点击头像:', author)
// }

// const handleAuthorClick = (author: Comment['author']) => {
//   console.log('点击作者:', author)
// }

// const handleContentClick = (comment: Comment) => {
//   console.log('点击内容:', comment)
// }

const handleReplyClick = (reply: Comment) => {
  console.log('点击回复:', reply)
}
</script>

<style scoped>
/* 自定义作者样式 */
</style>
